<template>
  <div class="index">
    <div>
      <div class="news-">
        <span> 官方公告：</span>
        <div> <lay-notice-bar leftIcon="layui-icon-mute" background="#ecf5ff" :text="system_msg"></lay-notice-bar></div>
        <span @click="news_edit('gg')">修改</span>
      </div>
      <div class="news-">
        <span> 官方活动：</span>
        <div> <lay-notice-bar leftIcon="layui-icon-mute" background="#ecf5ff" :text="system_activity"></lay-notice-bar></div>
        <span @click="news_edit('hd')">修改</span>
      </div>
      <!-- <ul class="header">
        <li>代理总数量(100)</li>
        <li>网吧总数量(50)</li>
      </ul> -->
      <avue-data-tabs :option="option"></avue-data-tabs>
    </div>

    <!-- echarts -->
    <div class="shop-box">
      <avue-data-tabs :option="option2"></avue-data-tabs>
      <!-- {{ shopping_config }} -->
      <!-- <div ref="pie_ref" style="width: 400px;height: 400px;"></div> -->
    </div>

  </div>

  <el-dialog v-model="dialogVisible" :title="news_title" width="40%">
    <el-input v-model="news_model" :rows="6" type="textarea" maxlength="200" />
    <div class="df jc-sb"><span></span><span>{{ news_model.length }}/200</span></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="news_enter">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
   
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import http from '../../http'
import { useCounterStore } from '../../current'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { userInfo } = storeToRefs(store) //  数据
import axios from 'axios'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

// 初始化
onMounted(async () => {
  get_shopping_config()
  get_system()
  get_activity()
  const num_arr1 = await req_sql('SELECT COUNT(*) FROM agentuser', 'userglobal')
  option.value.data[0].count = Number(num_arr1[0]['COUNT(*)'])
  const num_arr2 = await req_sql('SELECT COUNT(*) FROM owneruser', 'userglobal')
  option.value.data[1].count = Number(num_arr2[0]['COUNT(*)'])


  // var myChart = echarts.init(pie_ref.value);
  // myChart.setOption(pie_option.value);
})
const option = ref({
  data: [
    {
      click: function (item) {
        // alert(JSON.stringify(item))
      },
      title: '代理总数量',
      subtitle: '',
      count: 100,
      allcount: '',
      text: '使用本系统的代理总数量',
      color: 'rgb(27, 201, 142)',
      key: '代'
    },
    {
      click: function (item) {
        // // 获取盒子元素
        // const box = document.querySelector('.avue-data-tabs')
        // // 添加事件监听器
        // box.addEventListener('click', function (event) {
        //   // 阻止事件冒泡
        //   // event.stopPropagation()
        //   event.stopImmediatePropagation()
        //   // 判断点击的元素是否为实时部分
        //   if (event.target.textContent === '修改') {
        //     console.log(event)
        //     // event.target.style = `cursor: pointer`
        //     // alert(JSON.stringify(item))
        //     dialogVisible.value = true
        //     // box.removeEventListener('click', () => {})
        //   }
        // })
      },
      title: '网吧总数量',
      subtitle: '',
      count: 100,
      allcount: '',
      text: '使用本系统的网吧总数量',
      color: 'rgb(230, 71, 88)',
      key: '网'
    },
    {
      click: function (item) {
        // alert(JSON.stringify(item))
      },
      title: '文章统计',
      subtitle: '',
      count: 908,
      allcount: '',
      text: '评论次数',
      color: 'rgb(178, 159, 255)',
      key: '评'
    }
  ]
})

const option2 = ref({
  data: [
    {
      click: function (item) {
      },
      title: '商城总人数',
      subtitle: '',
      count: 100,
      allcount: '',
      text: '使用APP商城的总数量',
      color: 'rgb(144,144,247)',
      key: '总'
    },
    {
      click: function (item) {
      },
      title: '商城在线人数',
      subtitle: '',
      count: 100,
      allcount: '',
      text: '使用APP商城的在线数量',
      color: 'rgb(247,144,247)',
      key: '线' 
    }
  ] 
}) 

// 弹窗
const dialogVisible = ref(false)
const isAddEdit = ref('')

const news_title = ref('')
const news_model = ref('')
// 修改公告
const news_edit = (type: string) => {
  dialogVisible.value = true
  isAddEdit.value = type
  if (isAddEdit.value == 'gg') {
    news_title.value = '修改官方公告'
    news_model.value = system_msg.value
  } else if (isAddEdit.value == 'hd') {
    news_title.value = '修改官方活动'
    news_model.value = system_activity.value
  }
}
const news_enter = async () => {
  let packageType = ''
  let notice: any = ''
  let activity: any = ''

  if (isAddEdit.value == 'gg') {
    console.log('公告')
    packageType = 'adminSetNotice'
    activity = undefined
    notice = news_model.value
  } else if (isAddEdit.value == 'hd') {
    console.log('活动')
    packageType = 'adminSetActivity'
    notice = undefined
    activity = news_model.value
  }

  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType,
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      notice,
      activity
    }
  })
  console.log(res)
  dialogVisible.value = false

  if (res.packageContent.packageStatus == 0) {
    await get_system()
    await get_activity()

    ElMessage.success('修改成功')
  }
}

const system_msg = ref('')
// 获取系统公告
const get_system = async () => {
  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminGetNotice',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password
    }
  })
  if (res.packageContent.packageStatus === 0) {
    system_msg.value = res.packageContent.packageMsg
  }

  console.log(res)
}

const system_activity = ref('')
// 获取服务器活动
const get_activity = async () => {
  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminGetActivity',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password
    }
  })
  if (res.packageContent.packageStatus === 0) {
    system_activity.value = res.packageContent.packageMsg
  }
}

const req_sql = async (sql, dbName) => {
  console.log(userInfo.value)

  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminSql',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      sql: sql,
      dbName: dbName
    }
  })

  let result = []
  if (res.packageContent.packageStatus === 0 && res.packageContent.packageMsg !== '成功') {
    // let data = JSON.parse(res.packageContent.packageMsg) || [];
    // tableData.value = data;
    // console.log(tableData.value);
    result = JSON.parse(res.packageContent.packageMsg)
  } else {
    result = []
  }

  return result
}

const shopping_config = ref({})
const get_shopping_config = async () => {
  await axios({
    url: 'http://39.98.56.166:8081/ExtApi/GetUserCount',
    // url: 'http://wfdoudizhu.hnhxzkj.com/ExtApi/GetUserCount',
    
    method: 'get'
  }).then((res) => {
    console.log(res)
    shopping_config.value = res.data.info
    pie_option.value.series[0].data[0].value = res.data.info.userCount
    pie_option.value.series[0].data[1].value = res.data.info.onLineUserCount

    option2.value.data[0].count = Number( res.data.info.userCount)
    option2.value.data[1].count = Number( res.data.info.onLineUserCount)
  })
}

// 饼图
const pie_ref = ref(null)
const pie_option = ref({
  title: {
    text: '商城数据',
    subtext: '',
    left: 'left'
  },
  tooltip: {
    trigger: 'item'
  },

  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 0, name: '总人数' },
        { value: 0, name: '在线人数' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
</script>

<style scoped lang="scss">
// * {
//   margin: 0;
//   padding: 0;
//   list-style: none;
// }
.index {
  > div {
    .news- {
      // display: flex;
      // align-items: center;
      background-color: #ecf5ff;
      padding: 0 10px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      > div {
        width: 100%;
      }
      span {
        width: 80px;
        cursor: pointer;
        text-align: center;
      }
    }
    .header {
      width: 100%;
      display: flex;
      height: 100px;
      // justify-content: space-between;
      li {
        justify-content: center;
        align-items: center;
        display: flex;
        color: #fff;

        width: 300px;
      }
      li:nth-child(1) {
        background-color: rgb(106, 39, 230);
      }
      li:nth-child(2) {
        background-color: rgb(32, 134, 230);
        margin-left: 30px;
      }
    }
  }
}

:deep(.avue-data-tabs) {
  span {
    cursor: pointer;
  }
}
 
.shop-box{
  :deep(.avue-data-tabs){
    .el-col-md-8{
      max-width:50%;
      flex:1
    }
  }
}
</style>